<template>
  <el-form
    style="margin-left: 8%; margin-top: 8%"
    :inline="true"
    :model="formInline"
    class="demo-form-inline"
  >
    <el-form-item label="公寓名称">
      <el-select
        style="width: 220px"
        v-model="apartId"
        placeholder="请选择公寓"
      >
        <el-option
          v-for="(item, index) in apartHouseList"
          :key="index"
          :label="item.name"
          :value="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="房间">
      <el-select
        @change="onChange"
        style="width: 220px"
        v-model="houseId"
        placeholder="请选择房间"
      >
        <el-option
          v-for="(item, index) in housesList"
          :key="index"
          :label="item.number"
          :value="index"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="地&emsp;&emsp;址">
      <div
        v-if="apartHouseList[apartId] != null"
        style="border: 1px solid #D3D3D3;color:#BEBEBE;text-align: center;padding: 0px 30px 0px 15px;;background-color: #ffffff;"
      >
        {{
          apartHouseList[apartId].address +
            apartHouseList[apartId].name +
            apartHouseList[apartId].units +
            '单元' +
            housesList[houseId].floor +
            '层' +
            housesList[houseId].number
        }}
      </div>
      <div v-else></div>
    </el-form-item>
    <br />
    <el-form-item label="电&emsp;&emsp;话">
      <el-input v-model="phone" placeholder="公寓联系电话" clearable />
    </el-form-item>
    <el-form-item label="每月租金">
      <el-input v-model="money" placeholder="请输入金额" type="number" />
    </el-form-item>
    <el-form-item label="支付方式">
      <el-input v-model="payType" placeholder="在线支付" clearable disabled />
    </el-form-item>
    <br />
    <el-form-item>
      <el-button type="primary" @click="submit" :disabled="uploadBtn">
        上传
      </el-button>
    </el-form-item>
    <!-- <el-form-item label="租住方案">
      <el-input
        v-model="formInline.user"
        placeholder="请输入租住方案"
        clearable
      />
    </el-form-item>
    <el-form-item label="租住开始时间">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="请选择开始日期"
        clearable
      />
    </el-form-item>
    <el-form-item label="租住结束时间">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="请选择结束日期"
        clearable
      />
    </el-form-item>
    <br />
    <el-form-item label="选择合同模板">
      <el-input v-model="formInline.user" placeholder="请选择模板" clearable />
    </el-form-item>
    <br /> -->
    <!-- <el-form-item label="附&emsp;&emsp;&emsp;&emsp;件">
      <el-button type="primary" @click="onSubmit">选择文件</el-button>
      <br />
      <p>支持格式：.jpg .png pdf，单个文件不能超过10MB</p>
    </el-form-item> -->
  </el-form>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getApartHouse, newContract } from '@/api/contract'
import { ElMessage } from 'element-plus'
var apartHouseList = ref([])
var housesList = ref([])
var apartId = ref(0)
var houseId = ref(0)
var phone = ref('12345678910')
var money = ref(0)
var result = ref(false)
var copy = ref([])
var uploadBtn = ref(false)
onMounted(async () => {
  // console.log(ElIcons);
  apartHouseList.value = (await getApartHouse()).data
  housesList.value = apartHouseList.value[apartId.value].housesInfoList
  console.log(apartHouseList.value, housesList.value)
})
watch(apartId, newId => {
  housesList.value = apartHouseList.value[newId]?.housesInfoList || []
})
async function submit() {
  ElMessage.success('合同模板正在上传中，请稍后')
  uploadBtn.value = true
  copy.value = apartHouseList.value[apartId.value]
  copy.value.housesInfoList = []
  copy.value.housesInfoList[0] = housesList.value[houseId.value]
  // console.log(copy.value);
  result.value = (
    await newContract(JSON.stringify(copy.value), phone.value, money.value)
  ).data
  if (result.value) {
    ElMessage.success('合同模版上传成功，等待审核')
    housesList.value.splice(houseId.value, 1)
    location.reload()
  } else {
    ElMessage.error('合同模版上传失败')
    location.reload()
  }
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.el-form-item {
  margin-left: 10%;
}
p {
  color: #b0acac;
}
</style>
